<template>
  <view class="tarbar-view">
    <view class="tarbar-list" :style="{
                background: tabBar.backgroundColor,
                color: tabBar.color,
                'border-top': tabBar.position == 'bottom' ? '0rpx solid ' + tabBar.borderStyle : 0,
                'border-bottom': tabBar.position == 'top' ? '0rpx solid ' + tabBar.borderStyle : 0
            }">
      <view class="tarbar-list-ul">
        <view class="tarbar-list-li" v-for="(item, index) in tabBar.list" :key="index"
          @click.top="setSelected(item,index)" :style="{'background-color':selected==index?'':''}">
          <!-- <view class="lineto" v-if="index!==0"></view> -->
          <view class="new-bar-message">
            <view class="tarbar-list-li-icon">
              <image :src="selected === index ? item.selectedIconPath : item.iconPath" mode="heightFix"/>
            </view>
            <view class="tarbar-list-li-name" :style="{color:selected ===  index ? tabBar.selectedColor: '#272727'}">
              {{ item.text }}
            </view>
          </view>

        </view>
      </view>
    </view>
	<view class="bottom-ios-line"></view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        selected: '',
        tabBar: {
          color: '#ffffff',
          selectedColor: '#0480FB',
          borderStyle: '#ccc',
          backgroundColor: 'transparent',
          position: 'top',
          list: [{
              pagePath: '/subPage1/socialized-service/breed-aquatics/online-class/online-class',
              iconPath: '/static/socialized-service/socialized-bottomtabar/zaixianketang.svg',
              selectedIconPath:'/static/socialized-service/socialized-bottomtabar/zaixianketang-1.svg',
              text: '在线课堂'
            },
            {
              pagePath: '/subPage1/socialized-service/breed-aquatics/tech-article/tech-article',
              iconPath: '/static/socialized-service/socialized-bottomtabar/zhenduanbaogao.svg',
              selectedIconPath: '/static/socialized-service/socialized-bottomtabar/zhenduanbaogao-1.svg',
              text: '技术文章'
            },
			{
			  pagePath: '/subPage1/socialized-service/breed-aquatics/popular-science-training/index',
			  iconPath: '/static/socialized-service/socialized-bottomtabar/peixun.svg',
			  selectedIconPath: '/static/socialized-service/socialized-bottomtabar/peixun-1.svg',
			  text: '科普培训'
			},
            // {
            //   pagePath: '/subPage1/socialized-service/breed-aquatics/product-corridor/product-corridor',
            //   iconPath: '/static/socialized-service/socialized-bottomtabar/chanpin-2.png',
            //   selectedIconPath: '/static/socialized-service/socialized-bottomtabar/chanpin-1.png',
            //   text: '产品走廊'
            // }
          ]
        },
      }
    },
    mounted() {
      this.setselectindex()
    },
    methods: {
      // 获取获取当前处于那个页面，判断index
      setselectindex() {
        let routes = getCurrentPages()
        let curRoute = routes[routes.length - 1].route
        // console.log(curRoute);return
        if (curRoute === 'subPage1/socialized-service/breed-aquatics/online-class/online-class') {
          this.selected = 0
          }else if(curRoute === 'subPage1/socialized-service/breed-aquatics/tech-article/tech-article'){
          	this.selected = 1
        } else if (curRoute === 'subPage1/socialized-service/breed-aquatics/popular-science-training/index') {
          this.selected = 2
        }
      },
      // 点击底部导航栏触发方法
      setSelected(e, i) {
        if (this.selected !== i) {
          this.$store.commit({
            type: 'setTabbarIndex',
            tabindex: i,
          })
          let routes = getCurrentPages()
          uni.redirectTo({ url: e.pagePath })


        }
        // 强制刷新组件状态
        // this.$forceUpdate();
      },

    }
  }
</script>

<style lang="scss" scoped>
  .tarbar-view {
    width: 100%;
    position: fixed;
    bottom: 0;
    z-index: 98;

    // padding-bottom: constant(safe-area-inset-bottom);  /* 兼容 iOS < 11.2 */
    // padding-bottom: env(safe-area-inset-bottom);  /* 兼容 iOS >= 11.2 */
    .tarbar-list {
      width: 100%;
      max-height: 355rpx;
      min-height: 100rpx;
	  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.4);
      color: #4f5153;

      .tarbar-list-ul {
		height: 136rpx;
		box-shadow: 0rpx -2rpx 6rpx 2rpx rgba(1,32,45,0.08);
        width: 100%;
        display: flex;
        align-items: center;
        background-color: #FFFFFF;
        // padding-bottom: constant(safe-area-inset-bottom);
        // /* 兼容 iOS < 11.2 */
        // padding-bottom: env(safe-area-inset-bottom);
        /* 兼容 iOS >= 11.2 */
        justify-content: space-around;
        // border-top:  1px solid #ebedf0;

        .tarbar-list-li {
          width: 25%;
          height: 136rpx;
          text-align: center;
          display: flex;
          // flex-direction: column;
          // justify-content: center;
          align-items: center;
          justify-content: center;

          // .lineto{
          // 		float: left;
          // 		height: 100rpx;
          // 		width: 3rpx;
          // 		background-image: linear-gradient(to top,#4d586f,#ffffff,#4d586f);
          // 	}
          .new-bar-message {
            width: calc(100% - 2px);
            height: 136rpx;
            // background-color: #4CD964;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;

            .tarbar-list-li-icon {
              width: 50rpx;
              // height: 60rpx;
              margin: 0 0 6rpx;
              // background-color: #00FFEE;
			  image{
				  height: 50rpx;
			  }
            }

            .tarbar-list-li-name {
              // background-color: #00363D;
              width: 180rpx;
              text-align: center;
              line-height: 30rpx;
              font-size: 28rpx;
              font-weight: 500;
              height: 30rpx;
              letter-spacing: 1rpx;
            }
          }
        }
      }
    }
  }
</style>
